<template>
  <view class="album-edit">
    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 封面 -->
      <view class="cover-section">
        <image 
          :src="form.coverUrl || '/static/default-album.png'" 
          mode="aspectFill" 
          class="album-cover"
          @click="changeCover"
        ></image>
        <view class="cover-mask">
          <u-icon name="camera" size="40" color="#fff"></u-icon>
          <text>更换封面</text>
        </view>
      </view>

      <!-- 表单内容 -->
      <view class="form-content">
        <view class="form-item">
          <text class="label">相册名称</text>
          <input 
            type="text"
            v-model="form.title"
            placeholder="请输入相册名称"
            class="input"
          />
        </view>

        <view class="form-item">
          <text class="label">相册描述</text>
          <textarea
            v-model="form.description"
            placeholder="请输入相册描述"
            class="textarea"
          ></textarea>
        </view>

        <view class="form-item">
          <text class="label">访问权限</text>
          <view class="privacy-switch">
            <text>私密相册</text>
            <switch 
              :checked="form.status === 0"
              @change="onPrivacyChange"
              color="#3a8838"
            />
          </view>
        </view>
      </view>

      <!-- 加载中状态 -->
      <view class="loading-state" v-if="isLoading">
        <view class="loading-spinner">
          <loading></loading>
        </view>
        <text>加载中...</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="btn cancel" @click="cancel">取消</button>
      <button class="btn save" @click="save">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      albumId: '',
      form: {
        title: '',
        description: '',
        status: 1,  // 0-私密，1-公开
        coverUrl: '',
        coverPhotoId: null
      },
      isLoading: false
    }
  },
  onLoad(options) {
    this.albumId = options.id;
    if (this.albumId) {
      this.loadAlbumInfo();
    }
  },
  methods: {
    // 加载相册信息
    async loadAlbumInfo() {
      try {
        // TODO: 调用获取相册详情API
        // const result = await getAlbumDetail(this.albumId);
        // const album = result.data;
        // this.form = {
        //   title: album.title,
        //   description: album.description,
        //   status: album.status,
        //   coverUrl: album.coverUrl,
        //   coverPhotoId: album.coverPhotoId
        // };
      } catch (error) {
        console.error('加载相册信息失败:', error);
        uni.showToast({
          title: '加载相册信息失败',
          icon: 'none'
        });
      }
    },
    
    // 更换封面
    changeCover() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          // TODO: 实现封面上传逻辑
          this.form.coverUrl = res.tempFilePaths[0];
        }
      });
    },
    
    // 切换私密状态
    onPrivacyChange(e) {
      this.form.status = e.detail.value ? 0 : 1;
    },
    
    // 取消编辑
    cancel() {
      uni.navigateBack();
    },
    
    // 保存修改
    async save() {
      if (!this.form.title.trim()) {
        uni.showToast({
          title: '请输入相册名称',
          icon: 'none'
        });
        return;
      }
      
      try {
        // TODO: 调用更新相册API
        // await updateAlbum(this.albumId, this.form);
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        console.error('保存失败:', error);
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
.album-edit {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.form-section {
  flex: 1;
  padding: 30rpx;
}

.cover-section {
  position: relative;
  width: 100%;
  height: 400rpx;
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.album-cover {
  width: 100%;
  height: 100%;
}

.cover-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.cover-mask text {
  margin-top: 20rpx;
  font-size: 28rpx;
}

.form-content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.textarea {
  width: 100%;
  height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.privacy-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.privacy-switch text {
  font-size: 28rpx;
  color: #333;
}

.bottom-buttons {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.cancel {
  background-color: #f5f5f5;
  color: #666;
}

.save {
  background-color: #3a8838;
  color: #fff;
}

.loading-state {
  padding: 100rpx 0;
  text-align: center;
  color: #999;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;
}

.loading-image {
  width: 72rpx;
  height: 72rpx;
}
</style> 